<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理 - 心语</title>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
    <link rel="stylesheet" href="database-config.css">
    <!-- 引入 SweetAlert2 的 CSS -->
</head>

<body>
    <div id="database-config-app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="sidebar-header">
                    <div class="logo">心语</div>
                    <h1 class="sidebar-title">知识库管理</h1>
                </div>
                <nav class="sidebar-nav">
                    <a href="#" class="nav-link" @click.prevent="currentView = 'database'">
                        <span class="nav-icon">📁</span>
                        数据库管理
                    </a>
                    <a href="#" class="nav-link" @click.prevent="currentView = 'knowledge'">
                        <span class="nav-icon">📚</span>
                        知识文档管理
                    </a>
                    <a href="index.html" class="nav-link">
                        <span class="nav-icon">←</span>
                        返回主页
                    </a>
                </nav>
            </aside>

            <!-- 主要内容区 -->
            <main class="main-content">
                <div class="breadcrumb">
                    <span>首页</span>
                    <span class="separator">/</span>
                    <span>{{ currentView === 'database' ? '数据库管理' : '知识文档管理' }}</span>
                </div>

                <div class="content-container">
                    <div class="page-header">
                        <h2>{{ currentView === 'database' ? '数据库管理' : '知识文档管理' }}</h2>
                    </div>

                    <!-- 数据库管理表单 -->
                    <div v-if="currentView === 'database'">
                        <form class="config-form" @submit.prevent="saveDatabaseConfig">
                            <div class="form-group">
                                <label class="form-label" for="dbName">数据库名称</label>
                                <input type="text" class="form-input" id="dbName" v-model="databaseName"
                                    placeholder="需修改的数据库名称" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="dbUrl">URL</label>
                                <input type="text" class="form-input" id="dbUrl" v-model="urlDb"
                                    placeholder="例如: jdbc:mysql://localhost:3306/traffic" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="dbUsername">数据库用户名</label>
                                <input type="text" class="form-input" id="dbUsername" v-model="usernameDb"
                                    placeholder="用户名" required>
                            </div>

                            <div class="form-group">
                                <label class="form-label" for="dbPassword">数据库密码</label>
                                <input type="password" class="form-input" id="dbPassword" v-model="passwordDb"
                                    placeholder="密码" required>
                            </div>

                            <div class="form-group">
                                <div class="file-upload database-upload">
                                    <button type="button" class="upload-button" @click="triggerDbFileUpload">
                                        <span class="upload-icon">📁</span>
                                        上传数据库结构文件
                                    </button>
                                    <input type="file" ref="dbFileInput" style="display: none;"
                                        @change="handleDbFileUpload">
                                    <span class="file-name" v-if="dbUploadedFileName">{{ dbUploadedFileName }}</span>
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="submit" class="button button-primary">保存信息</button>
                                <button type="button" class="button button-secondary"
                                    @click="addDatabase">增加数据库</button>
                            </div>
                        </form>

                        <!-- 搜索输入框和按钮 -->
                        <div class="search-container">
                            <input type="text" class="search-input" v-model="searchQueryDatabase" placeholder="搜索数据库..."
                                @keyup.enter="performSearchDatabase">
                            <button class="button button-primary search-button"
                                @click="performSearchDatabase">搜索</button>
                        </div>

                        <div class="table-section">
                            <h3 class="section-title">已连接数据库</h3>
                            <div class="table-container">
                                <table v-if="filteredDatabases.length > 0" class="data-table">
                                    <thead>
                                        <tr>
                                            <th>数据库名称</th>
                                            <th>连接地址</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="db in filteredDatabases" :key="db.name">
                                            <td>{{ db.name }}</td>
                                            <td>{{ db.url }}</td>
                                            <td>
                                                <button class="button button-danger button-small"
                                                    @click="removeDatabase(db.name)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p v-else class="no-databases">当前没有连接任何数据库。</p>
                            </div>
                        </div>
                    </div>

                    <!-- 知识文档管理表单 -->
                    <div v-else-if="currentView === 'knowledge'">
                        <form class="config-form-zsk" @submit.prevent="handleFileUpload">
                            <div class="form-group">
                                <div class="file-upload knowledge-upload">
                                    <button type="button" class="upload-button" @click="triggerDocFileUpload">
                                        <span class="upload-icon">📁</span>
                                        上传知识文档
                                    </button>
                                    <input type="file" ref="docFileInput" style="display: none;"
                                        @change="handleDocFileUpload">
                                    <!-- 知识文档搜索输入框和按钮 -->
                                    <input type="text" class="search-input-zsk" v-model="searchQueryKnowledge"
                                        placeholder="搜索知识文档..." @keyup.enter="performSearchKnowledge">
                                    <button class="button button-primary search-button"
                                        @click="performSearchKnowledge">搜索</button>
                                </div>
                            </div>

                        </form>



                        <div class="table-section">
                            <h3 class="section-title">已配置知识文档</h3>
                            <div class="table-container">
                                <table v-if="filteredKnowledgeDocs.length > 0" class="data-table">
                                    <thead>
                                        <tr>
                                            <th>文档名称</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="doc in filteredKnowledgeDocs" :key="doc.name">
                                            <td>{{ doc.name }}</td>
                                            <td>
                                                <button class="button button-danger button-small"
                                                    @click="removeKnowledgeDoc(doc.name)">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p v-else class="no-databases">当前没有配置任何知识文档。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入 SweetAlert2 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- 引入 database-config.js -->
    <script src="database-config.js"></script>
</body>

</html>